import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { IEchartsProps } from '@/types'

const PieCharts: React.FC<IEchartsProps> = props => {
  const echartRef = useRef(null)
  const data = [
    {
      value: 219,
      name: '北京'
    },
    {
      value: 710,
      name: '上海'
    },
    {
      value: 245,
      name: '深圳'
    },
    {
      value: 40,
      name: '广州'
    },
    {
      value: 231,
      name: '杭州'
    },
    {
      value: 298,
      name: '武汉'
    }
  ]
  useEffect(() => {
    initEcharts()
  }, [])

  const initEcharts = () => {
    const myEcharts = echarts.init(echartRef.current)
    const option = {
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: ['10%', '40%'],
          data
        }
      ]
    }
    myEcharts.setOption(option)
  }

  return <div ref={echartRef} style={{ width: props.width, height: props.height }}></div>
}

export default PieCharts
